<template>
  <div>
    <!-- 上排卡片 -->
    <el-row :gutter="12" style="margin-top:20px">
      <el-col :span="6">
        <el-card shadow="always" class="card l-bg-green-dark">
          <h3 style="text-align:left">历史销售额</h3>
          <div class="card-statistic-3">
            <div class="card-icon card-icon-large"><span>￥ {{ historySale }}</span><i class="fa fa-award"></i></div>
            <div class="card-content">
              <el-progress :percentage="100" color="#F56C6C"></el-progress>
              <p class="mb-0 text-sm">
                <span class="mr-2"><i class="fa fa-arrow-up"></i> </span>
                <span class="text-nowrap">Historical sales</span>
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="card l-bg-cyan-dark">
          <h3 style="text-align:left">今日销售额</h3>
          <div class="card-statistic-3">
            <div class="card-icon card-icon-large"><span>￥ {{ daySale == 'null' ? 0 : daySale}}</span><i class="fa fa-award"></i></div>
            <div class="card-content">
             <el-progress :percentage="25" color="#F2FF40"></el-progress>
              <p class="mb-0 text-sm">
                <span class="mr-2"><i class="fa fa-arrow-up"></i> </span>
                <span class="text-nowrap">Sales today </span>
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="card l-bg-purple-dark">
          <h3 style="text-align:left">健康管理师</h3>
          <div class="card-statistic-3">
            <div class="card-icon card-icon-large"><span> {{ healthNumber }} 人</span><i class="fa fa-award"></i></div>
            <div class="card-content">
              <el-progress :percentage="100" color="#40FFDF"></el-progress>
              <p class="mb-0 text-sm">
                <span class="mr-2"><i class="fa fa-arrow-up"></i> </span>
                <span class="text-nowrap">Health Manager</span>
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="always" class="card l-bg-orange-dark">
          <h3 style="text-align:left">今日设置预约人数</h3>
          <div class="card-statistic-3">
            <div class="card-icon card-icon-large"><span> {{settingPersonNum == 'null' ? 0 : settingPersonNum}} 人</span><i class="fa fa-award"></i></div>
            <div class="card-content">
              <el-progress :percentage="25" color="#18DE1B"></el-progress>
              <p class="mb-0 text-sm">
                <span class="mr-2"><i class="fa fa-arrow-up"></i> </span>
                <span class="text-nowrap">Set up an appointment today </span>
              </p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 下排卡片 -->
    <el-row :gutter="12" >
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">会员总人数</h3>
            <el-progress type="circle" :percentage="100" :format="formatTotalMember"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">今日新增会员</h3>
            <el-progress type="circle" :percentage="25" color="#67C23A" :format="formataddMember"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">预约总人数</h3>
            <el-progress type="circle" :percentage="100" color="#F56C6C" :format="formatTotalHealth"></el-progress>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <h3 style="text-align:left">今日预约人数</h3>
            <el-progress type="circle" :percentage="25" color="#E6A23C" :format="formataddHealth"></el-progress>
          </el-card>
        </el-col>
    </el-row>

    <div id="main1" style="width: 93%;height: 400px;margin:20px"></div>
     <el-divider></el-divider>
    <div id="main2" style="width: 95%;height: 600px;margin:20px;margin-bottom:30px"></div>

    <h2 style="text-align:center;margin-bottom:23px;">健康体检流程图</h2>
    <img src="http://192.168.43.183/files/liucheng.png">
     <el-divider></el-divider>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  name: 'Zhu',
  data () {
    return {
      charts: '',
      moneyDate: [], // 收益日期数组
      opinionData: [], // 收益总量数组
      taocan: [], // 套餐数组
      taocanCount: [], // 套餐销售量数组
      totalMember: '',
      addMember: '',
      totalHealth: '',
      addHealth: '',
      healthNumber: 0,
      settingPersonNum: 0,
      historySale: 100,
      daySale: 10
    }
  },
  methods: {
    // 收益统计图
    drawLine (id) {
      this.charts = echarts.init(document.getElementById(id))
      this.charts.setOption({
        title: {
          text: '收益统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['当日收益']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.moneyDate,
          name: '日期', // X轴 name
          nameTextStyle: {// 坐标轴名称的文字样式
            fontSize: 16,
            padding: [0, 0, 0, 0]
          },
          axisLine: {// 坐标轴轴线相关设置。
          }
        },
        yAxis: {
          name: '金额(元)',
          nameTextStyle: {
            fontSize: 16
          },
          axisLine: {
          },
          type: 'value'
        },
        series: [{
          name: '当日收益',
          type: 'line',
          stack: '总量',
          data: this.opinionData
        }]
      })
    },
    // 套餐销量柱状图
    drawChart () {
      var echarts = require('echarts')
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main2'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '套餐销量'
        },
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          data: this.taocan,
          name: '套餐名称',
          nameTextStyle: {// 坐标轴名称的文字样式
            fontSize: 16,
            padding: [0, 0, 0, 0]
          },
          // axisLabel: {
          //   interval: 0,
          //   formatter: function (value) {
          //     return value.split('').join('\n')
          //   }
          // }
          axisLabel: {
            interval: 0,
            rotate: -33 // 倾斜的程度
          }
        },
        grid: {
          bottom: 200
        },
        yAxis: {
          name: '数量',
          nameTextStyle: {
            fontSize: 16
          }
        },
        series: [
          {
            name: '总销量',
            type: 'bar',
            data: this.taocanCount
          }
        ]
      })
    },
    formatTotalMember (percentage) {
      return this.totalMember + '人'
    },
    formataddMember (percentage) {
      return this.addMember + '人'
    },
    formatTotalHealth (percentage) {
      return this.totalHealth + '人'
    },
    formataddHealth (percentage) {
      return this.addHealth + '人'
    },
    // 获取日期的方法
    beforeDays (num, date) {
      // 设置日期，当前日期的前num天
      let myDate = new Date(date) // 获取输入的日期
      myDate.setDate(myDate.getDate() - (num - 1))
      let dateArray = []
      let myMonth = myDate.getMonth() + 1
      if (myMonth >= 1 && myMonth <= 9) {
        myMonth = '0' + myMonth
      }
      let myDates = myDate.getDate()
      if (myDates >= 0 && myDates <= 9) {
        myDates = '0' + myDates
      }
      let dateTemp
      let flag = 1
      for (let i = 0; i < num; i++) {
        dateTemp = myDate.getFullYear() + '-' + myMonth + '-' + myDates
        dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
      }
      return dateArray[0]
    },
    // 初始化数据的方法
    initZhu () {
      let date = []
      let dang = new Date()
      for (let index = 1; index <= 9; index++) {
        date.unshift(this.beforeDays(index, dang))
      }
      this.$axios.post(`/api/DHCountMemberController/querySaleMoney?dates=${date}`).then(({data}) => {
        this.moneyDate = date
        this.opinionData = data
        this.drawLine('main1')
      })
      this.$axios.post(`/api/DHCountMemberController/querySetMealSale`).then(({data}) => {
        this.taocan = []
        this.taocanCount = []
        for (let key in data) {
          this.taocan.unshift(key)
          this.taocanCount.unshift(data[key])
        }
        this.drawChart()
      })
      this.$axios.post(`/api/DHCountMemberController/queryTotalAndAdd`).then(({data}) => {
        this.totalMember = data.totalMember
        this.addMember = data.addMember
        this.totalHealth = data.totalHealth
        this.addHealth = data.addHealth
      })
      this.$axios.post(`/api/DHCountMemberController/indexDetails`).then(({data}) => {
        this.healthNumber = data.healthNumber
        this.settingPersonNum = data.settingPersonNum
        this.daySale = data.daySale
        this.historySale = data.historySale
      })
    }
  },
  // 加载方法
  created () {
    this.initZhu()
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
    background-color: #fff;
    border-radius: 10px;
    border: none;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 0.46875rem 2.1875rem rgb(90 97 105 / 10%), 0 0.9375rem 1.40625rem rgb(90 97 105 / 10%), 0 0.25rem 0.53125rem rgb(90 97 105 / 12%), 0 0.125rem 0.1875rem rgb(90 97 105 / 10%);
}
.l-bg-green-dark {
    background: linear-gradient(135deg, #23bdb8 0, #65a986 100%) !important;
    color: #fff;
}
.card .card-statistic-3 {
    position: relative;
    color: #fff;
    padding: 15px;
    border-radius: 3px;
    overflow: hidden;
}
.l-bg-cyan-dark {
    background: linear-gradient(135deg, #289cf5, #4f8bb7) !important;
    color: #fff;
}
.l-bg-purple-dark {
    background: linear-gradient(135deg, #8e4cf1 0, #c554bc 100%) !important;
    color: #fff;
}
.l-bg-orange-dark {
    background: linear-gradient(135deg, #f48665 0, #d68e41 100%) !important;
    color: #fff;
}
</style>
